Node / mirrors / respira / files / src / components / ConfirmDialog.tsx

Displaying Raw • Download

import {

AlertDialog,

AlertDialogAction,

AlertDialogCancel,

AlertDialogContent,

AlertDialogDescription,

AlertDialogFooter,

AlertDialogHeader,

AlertDialogTitle,

} from "@/components/ui/alert-dialog";

import { cn } from "@/lib/utils";

interface ConfirmDialogProps {

isOpen: boolean;

title: string;

message: string;

confirmText?: string;

cancelText?: string;

onConfirm: () => void;

onCancel: () => void;

variant?: "danger" | "warning";

}

export function ConfirmDialog({

isOpen,

title,

message,

confirmText = "Confirm",

cancelText = "Cancel",

onConfirm,

onCancel,

variant = "warning",

}: ConfirmDialogProps) {

return (

<AlertDialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>

<AlertDialogContent

className={cn(

variant === "danger"

? "border-t-4 border-danger-600 dark:border-danger-500"

: "border-t-4 border-warning-500 dark:border-warning-600",

)}

>

<AlertDialogHeader>

<AlertDialogTitle>{title}</AlertDialogTitle>

<AlertDialogDescription>{message}</AlertDialogDescription>

</AlertDialogHeader>

<AlertDialogFooter>

<AlertDialogCancel onClick={onCancel}>{cancelText}</AlertDialogCancel>

<AlertDialogAction

onClick={onConfirm}

className={cn(

variant === "danger" &&

"bg-danger-600 hover:bg-danger-700 dark:bg-danger-700 dark:hover:bg-danger-600",

)}

>

{confirmText}

</AlertDialogAction>

</AlertDialogFooter>

</AlertDialogContent>

</AlertDialog>

);

}